<template>
    <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区 -->
    <el-card>
        <el-row>
            <el-col>
                <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
            </el-col>
        </el-row>
        <!-- 表格 -->
        <tree-table :data="catelist"
        :columns ="cateColumns"
        :expand-type="false"
        :selection-type="false"
        :show-index="true"
        :show-row-hover="true"
       style="margin-top:10px;"
        index-text="#"
        border>
        <!-- 自定义模板 是否有效 -->
        <template slot="isok" slot-scope="scope">
           <i class="el-icon-success" v-if="scope.row.cat_deleted === false"
           style="color:lightgreen;"></i>
           <i class="el-icon-error" v-else
           style="color:red;"></i>
        </template>
        <!-- 排序 -->
        <template slot="order" slot-scope="scope">
           <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
           <el-tag size="mini" type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
           <el-tag size="mini" type="warning" v-else>三级</el-tag>
        </template>
        <!-- 操作 -->
        <template slot="opt" style="min-width:120px;">
            <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
        </template>
        </tree-table>
        <!-- 分页 -->
         <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[3,5, 10, 15]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-card>
    <!-- 添加分类对话框 -->
    <el-dialog
  title="提示"
  :visible.sync="addCateDialogVisible"
  width="50%"
  @close="addCateDialogClosed"
 >
 <!-- 添加分类的表单 -->
 <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px" class="demo-ruleForm">
  <el-form-item label="分类名称" prop="cat_name">
    <el-input v-model="addCateForm.cat_name"></el-input>
  </el-form-item>
  <!-- 父级分类 -->
  <el-form-item label="父级分类" >
      <!-- options用来指定数据源 -->
      <!-- props用来指定配置对象 -->
    <el-cascader
         v-model="selectedKeys"
            :change-on-select="true"
            :options="parentCateList"
            :props="cascadeProps"
            clearable
            @change="parentCateChanged"
           ></el-cascader>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addCateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </span>
</el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return{
        // 商品分类商品列表
        catelist:[],
         queryInfo:{
            type:3,
            pagenum:1,
            pagesize:5,
        },
        // 总数居条数
        total:0,
          // 分类名称
        cateColumns:[
           {
          label: '分类名称',
          prop: 'cat_name'
           },
           {
               label:'是否有效',
               // 将当前列定义为模板列
               type:'template',
               // 表示当前这一列使用模板名
               template:'isok'
           },
           {
               label:'排序',
               // 将当前列定义为模板列
               type:'template',
               // 表示当前这一列使用模板名
               template:'order'
           },
            {
               label:'操作',
               // 将当前列定义为模板列
               type:'template',
               // 表示当前这一列使用模板名
               template:'opt'
           }
        ],
        // 控制监听分类显示与隐藏
        addCateDialogVisible:false,
        // 添加分类的表单数据对象
        addCateForm:{
        // 将要添加的分类的名称
        cat_name: '',
        // 父级分类的Id
        cat_pid: 0,
        // 分类的等级, 默认要添加的是一级分类
        cat_level: 0
        },
        addCateFormRules:{
            cat_name:[
                { required: true, message: '请输入活动名称', trigger: 'blur' }
            ]
        },
          // 父级分类的列表
      parentCateList: [],
       // 指定级联选择器的配置对象
      cascadeProps: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children',
        // 从el-cascader标签的属性,中移动到这个cascadeProps中
        expandTrigger: 'hover'
      },
      // 选中的父级分类的Id数组
      selectedKeys: [],
        }
      
    },
    created(){
        this.getCateList()
    },
    methods:{
      async  getCateList(){
         const {data:res} = await this.$http.get('categories',{params:this.queryInfo})
         console.log(res);
         if(res.meta.status !== 200){
             return this.$message.error('获取商品列表失败')
         }
       //  console.log(res.data);
       // 数据列表数据
        this.catelist = res.data.result
        // 为总数据条数赋值
        this.total = res.data.total
       },
       // 监听pagesize改变
       handleSizeChange(newSize){
           this.queryInfo.pagesize = newSize
           this.getCateList()
       },
       // 监听pagenum改变
       handleCurrentChange(newPage){
           this.queryInfo.pagenum = newPage
           this.getCateList()
       },
       // 显示添加分类对话框
       showAddCateDialog(){
        //    先获取父级分类的列表
        this.getParentCateList()
        // 展示对话框
        this.addCateDialogVisible=true;
       },
       // 获取父级分类的数据列表
     async  getParentCateList(){
       const{data:res} = await this.$http.get('categories',{params:{type:2}})
              if (res.meta.status !== 200) {
              return this.$message.error('获取父级数据失败!')
           }
         this.parentCateList = res.data
       },
       // 选择项发生变化触发
     parentCateChanged(){
          console.log(this.selectedKeys)
           // 如果 selectedKeys数组中的length 大于 0, 证明选中的父级分类
      // 反之, 就说明没有选中任何父级分类
      if (this.selectedKeys.length > 0) {
        // 父级分类的Id
        this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]
        // 为当前分类的等级赋值
        this.addCateForm.cat_level = this.selectedKeys.length
      } else {
        // 父级分类的Id
        this.addCateForm.cat_pid = 0
        // 为当前分类的等级赋值
        this.addCateForm.cat_level = 0
      }
     },
    //  监听对话框的分类事件 重置
    addCateDialogClosed(){
         this.$refs.addCateFormRef.resetFields()
      /**
       * 注意点: 重置下拉框和表单里面的数据!!!
       * @type {*[]}
       */
      this.selectedKeys = []
      this.addCateForm.cat_level = 0
      this.addCateForm.cat_pid = 0
    },
     /**
     * 点击按钮, 添加新的分类
     */
    async addCate () {
      // console.log(this.addCateForm)
      this.$refs.addCateFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('categories', this.addCateForm)

        if (res.meta.status !== 201) {
          return this.$message.error('添加分类失败')
        } else {
        this.getCateList()
          this.addCateDialogVisible = false
         
          this.$message.success('添加分类成功')
        }
      })
    },

    }
}
</script>
<style scoped>
.el-cascader {
  width: 100%;
  height: 500px;
}
</style>>
    
